import React from 'react';
import {Text,View,Button} from 'react-native'
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';


function HomeScreen({ navigation: { navigate } }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            <Button
                title="Go to Details"
                onPress={() => {
                    navigate('Details', { names: ['Brent', 'Satya', 'Michaś'] })
                }}
            />
        </View>
    );
}


function DetailScreen(navigation) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>detail Screen</Text>
            <Button
                title="Go to Details"
                onPress={() => {
                    this.props.navigation.navigate('Details')
                }}
            />
        </View>
    );
}


export default class MainScreen extends React.Component {

    render() {
        const Stack = createStackNavigator();
        return (
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} options={{
                    title: '主页' ,
                    headerStyle: {
                        backgroundColor: '#f4511e',
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },}
                } />

                <Stack.Screen name="Details" component={DetailScreen} options={{
                    title: '详情' ,
                    headerStyle: {
                        backgroundColor: '#f4511e',
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },}
                } />
            </Stack.Navigator>
        );
    }
}
